/**
 * author: Anibal José Rindisbacher Calligaro.
 * email: anibal784@gmail.com
 * fecha: 28-10-2010
 */

var Loading = new Class
({
    initialize: function()
    {
        // FIXME: utilizar css
        this.loadingElement = new Element('div', {
            html: 'Cargando',
            styles: { 
                position: 'absolute',
                visibility: 'hidden',
                width: '130px',
                overflow: 'hidden',
                'background-color': '#ffffff',
                'font-weight': 'bold',
                height: 'auto',
                'z-index': 10000,
                left: (($(document).getSize().x/2) - 65) + 'px',
                top: ($(document).getSize().y / 2) + 'px'
            }
        });

        this.loadingElement.inject(document.body);
        this.timerId = null;    // el timerId es usado para parar el timer
    },

    showLoadingWidget: function()
    {
        var myFx = new Fx.Tween(this.loadingElement, {property: 'background-color', duration: 'long'});
        myFx.start('#ffffff', '#abcdef').chain(
                function(){ this.start('#abcdef', '#ffffff'); },
                function(){ this.start('#ffffff', '#abcdef'); },
                function(){ this.start('#abcdef', '#ffffff'); }
        );
    },


    /**
     * Muerstra el widget de carga hasta que se le envíe el comando stop
     */
    start: function()
    {
        this.loadingElement.setStyle('visibility', 'visible');
        this.timerId = this.showLoadingWidget.periodical('4000', this);
    },

    /**
     * Detiene el widget de carga
     */
    stop: function()
    {
        this.loadingElement.setStyle('visibility', 'hidden');
        clearInterval(this.timerId);
        this.timerId = null;
    }
});

var Comic = new Class
({
    realInitialize: function(elem_id)
    {
        this.element = $(elem_id);
        if(this.element == undefined){
            // no se encontró el elemento buscado... creamos uno
            // y suponemos que la imágen se encuentra en el directorio
            // actual.
            this.element = new Element('img', {
                src: './01.jpg'
            });
        }

        /**
         * Setup el elemento para que aparezca con una pequeña animación y para que deje
         * de mostrar el cuadro de carga cuando termine de cargar la imágen desde el
         * servidor
         */
        this.element.addEvent('load', (function(e) {
             this.loading.stop();
             this.element.fade('in');
        }).bind(this));

        
         /* Inferimos a partir de la propiedad del elemento el resto */
        var page_prefix = this.element.get('src');

        var lastSlash = page_prefix.lastIndexOf("/");
        this.path = page_prefix.substring(0, lastSlash+1);

        var lastDot = page_prefix.lastIndexOf(".");
        this.extension = page_prefix.substring(lastDot);

        this.fill_with_zeros = lastDot - lastSlash - 1;

        //alert("Path: " + this.path + " extension: " + this.extension + " - " + (lastDot - lastSlash - 1));
    },

    initialize: function(elem_id)
    {
        this.realInitialize(elem_id);

        this.pages = [];
        this.current_page = 0;

        this.loading = new Loading();

        this.setupGloboDeDialogo();

        if(Browser.ie){
            this.element.fade = function(time){};
        }else{
            this.element.set('fade', {duration: 'long'});
        }

        this._detectCollition = null; // funcion usada para la detección de coliciones.
    },

    setupGloboDeDialogo: function()
    {
        this.text = new Element('p', {
            id: 'FCRcomic_dialogo_id',
            styles: {
                position: 'absolute',
                'background-color': '#ffffff'
            }
        });

        this.text.inject(document.body);
    },

    generateRealPagePrefix: function()
    {
        return this.path ;
    },

    getCurrentPage: function()
    {
        return this.pages[this.current_page-1];
    },

    position: function()
    {
        return this.element.getPosition();
    },

    size: function()
    {
        return this.element.getSize();
    },

    /**
     * Detecta que el mouse pasó por en cima de un cuadro de diálogo y
     * muestra el texto correspondiente, si sale de dicho cuadro de diálogo
     * deja de mostrar el diálogo.
     */
    detectCollition: function(e)
    {
        if(this.pages.length <= this.current_page){
            //this.text.set('html', "");
            return;
        }

        var position = this.element.getPosition();
        var size = this.element.getSize();
        var coll_aux = {
            x: (((e.client.x + $(document).getScroll().x) - position.x)/size.x).round(2),
            y: (((e.client.y + $(document).getScroll().y) - position.y)/size.y).round(2)
        };

        var curr_page = this.pages[this.current_page-1];
        if(curr_page.findCurrentBox(coll_aux)){
            this.text.setPosition({x: e.client.x,
                                   y: $(document).getScroll().y + e.client.y + 20});
            this.text.set('html', curr_page.getText());
        }else{
            this.text.set('html', "");
        }
    },

    beginDetectCollitions: function()
    {
        this._detectCollition = this._detectCollition==null?this.detectCollition.bind(this):
                                                            this._detectCollition;
        this.element.addEvent('mousemove', this._detectCollition);
    },

    stopDetectCollitions: function()
    {
        this.element.removeEvent('mousemove', this._detectCollition);
    },

    /**
     * Agrega una página al comic para ser leída
     */
    addPage: function(page)
    {
        this.pages.push(page);
    },

    /**
     * Abre el comic. y muestra la página 1
     */
    open: function()
    {
        this.current_page = 1;
        this.loadElement();
        this.beginDetectCollitions();
    },

    loadElement: function()
    {
        this.real_page_prefix = "0".repeatTimes(this.fill_with_zeros - this.current_page.toString().length)

        this.element.fade('out');
        
        var _this = this;
        this.loading.start();

        this.element.set('src', this.path + this.real_page_prefix + this.current_page + this.extension);
        this.adjust();
    },

    /**
     * Pasar a la página siguiente
     */
    nextPage: function()
    {
        if(this.pages.length == this.current_page){
            return false;
        }
        this.current_page++;
        this.loadElement();
        return true;
    },
    
    /**
     * Pasar a la página anterior.
     */
    previousPage: function()
    {
        if(this.current_page == 1){
            return false;
        }
        this.current_page--;
        this.loadElement();
        return true;
    },

    adjust: function()
    {
        this.element.setStyle('height', $(document).getSize().y - 20);

        $(document.body).scrollTo(this.element.getPosition().x,
                                  this.element.getPosition().y);
    },

    originalSize: function()
    {
        this.element.setStyle('height', '100%');
    }
});

